﻿@inherits DemoWithResizableComponent

<div class="demo-description" id="CustomHeight">
    <h2><DemoNavLink Link="Memo#CustomSize" />Memo - Custom Size</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxMemo">Memo</a> component is a two-line editor that stretches to fit the parent container’s width, by default. To change this behavior, use the following properties:
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxMemo.Rows">Rows</a> - Specifies the number of text lines displayed by the editor.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxMemo.Columns">Columns</a> - Specifies the editor's display width in characters.</li>
    </ul>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Users can change the predefined size" />
    </div>
    <div class="card-body">
        <DxMemo @bind-Text="TextValue"
                SizeMode="SizeMode"
                Rows="8"
                Columns="50">
        </DxMemo>
    </div>
</div>

<CodeSnippet_Editor_Memo_CustomSize />

@code {
    string TextValue { get; set; } = "Prepare 2020 Marketing Plan: We need to double revenues in 2020 and our marketing strategy is going to be key here. " +
            "R&D is improving existing products and creating new products so we can deliver great AV equipment to our customers. " +
            "Robert, please make certain to create a PowerPoint presentation for the members of the executive team.";
}
